NaN

Vue基础知识

前言

(1) 前端技术发展历程

  • 纯原生 JavaScript
  • jQuery（仅仅是提高了 DOM 操作的效率）
  • 框架时代
  • 框架发展: 纯原生js -> prototype.js -> jQuery.js -> backbone.js+knockout.js -> angular.js -> vue.js+react.js

(2) Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 ​

  • 一款非常优秀的前端渐进式 JavaScript 框架
    • Vue 本身只是一个用于数据驱动视图更新的库
    • 随着生态的慢慢发展，如今已经有了 Vue Router、Vuex、Vue CLI、Vue Server Renderer 等功能库，所以当 Vue 和这些核心功能库结合到一起的时候，我们称之为一个框架
    • 这些技术一般也称之为 Vue 全家桶，所以学习 Vue 实际上就是要学习 Vue 全家桶才能发挥出 Vue 的威力
  • 由尤雨溪开发并于 2014 年 2 月开源于 Github(14w+ ⭐️)
  • 可以轻松构建 SPA 应用程序
  • 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML,通过组件化开发极大的提高了开发的效率和可维护性
  • 最大程度上解放了 DOM 操作

(3) Vue核心思想

Vue 是为了克服 HTML 在构建应用上的不足而设计的。Vue 有着诸多特性，最为核心的是：

  • 数据驱动
    • DOM 是数据的一种自然映射
    • 数据改变自动驱动视图更新
  • 组件化

(4) 相关资料

  1. https://cn.vuejs.org/index.html 官网
  2. https://cli.vuejs.org/zh/guide/ vue脚手架

(一) hello world

  1. el 实例挂载元素节点
  2. data 可以在模板上展示的数据
  3. 插值表达式, 用来展示data里的数据
  4. v-text和v-html指令可以展示文本和标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body> 
    <!-- vue的数据展示在#app里面 -->
    <div id="app">
        <!-- 差值表达式 -->
        <p>{{msg}}</p>
        <!-- v-text指令,用来展示文本 -->
        <p v-text="str"></p>
        <!-- v-html指令,用来展示标签 -->
        <p v-html="str"></p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                msg: 'hello world',
                str: '<button>这是个按钮</button>'
            }
        }); 

				// 数据修改了, 页面就会跟着改变, 这就是"数据驱动视图"
        // setTimeout(function() {
        //     vm.msg = '大家好';
        // },2000)
    </script> 
</body>
</html>

(二) 双向绑定

使用v-model指令对数据进行双向数据绑定 指令: 我们给计算机的命令

  1. 修改了data里的username的值, 页面的username会跟着变化
  2. 在页面上修改username的值, data里的username也会跟着变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>  
    <div id="app"> 
        <!-- v-model指令的作用是双向数据绑定 -->
        <input type="text" v-model="username"> 
        <p>{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三'
            }
        });  
    </script> 
</body>
</html>

(三) 修改css

绑定样式:

  • v-bind:calss
  • 简写 :class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .red {color:red}
    </style>
</head>
<body>  
    <div id="app">  
        <!-- v-bind绑定属性,这里是绑定class属性 -->
        <!-- 若flag的值为true,就给p标签添加"red",否则就移除 -->
        <p v-bind:class="{red:flag}">{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三',
                flag: true
            }
        });  

        setTimeout(function(){
            vm.flag = false;
        },2000)
    </script> 
</body>
</html>


// 使用三目运算符绑定class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .red {color:red}
    </style>
</head>
<body>  
    <div id="app">  
        <!-- 使用三目运算符修改class -->
        <p :class="flag?'red':''">{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三',
                flag: true
            }
        });   
    </script> 
</body>
</html>

(四) 修改样式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">   
        <!-- :style 绑定样式,修改data里的相关数据,样式也跟着发生改变 -->
        <p :style="{color:color,fontSize:size+'px'}">{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三', 
                color: 'red',
                size: 26
            }
        });   

        setTimeout(function() {
            vm.color = 'gold';
            vm.size  = 50;
        },2000)
    </script> 
</body>
</html>

(五) 绑定事件

  1. 绑定事件(不传参)
    1. v-on:事件类型
    2. 简写: @事件类型
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .red {color:red}
    </style>
</head>
<body>  
    <div id="app">  
        <button v-on:click="say">点我</button>
        <!-- 绑定事件简写 -->
        <button @click="say">点我</button>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: {  },
            // 方法放在methods
            methods: {
                say() {
                    alert('hahahahah')
                }
            }
        });   
    </script> 
</body>
</html>
  1. 绑定事件(传参)
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
        <p>请选择省份</p>
        <button @click="selectCity('广东')">广东</button>
        <button @click="selectCity('湖南')">湖南</button>
        <button @click="selectCity('江西')">江西</button>
        <button @click="selectCity('北京')">北京</button>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: {  },
            // 方法放在methods
            methods: {
                selectCity(city) {
                    alert('你选择了'+city);
                }
            }
        });   
    </script> 
</body>
</html>
  1. 绑定事件之表达式
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
       <p><button @click="showText">{{show?'隐藏':'显示'}}</button></p>

       <div v-show="show">
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
       </div>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                show: true
             }, 
            methods: {
                showText() {
                    this.show = !this.show;
                }
            }
        });   
    </script> 
</body>
</html>

// 以上例子可以简化成下面的例子
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <!-- 模板 -->
    <div id="app">  
       <p><button @click="show=!show">{{show?'隐藏':'显示'}}</button></p>

       <div v-show="show">
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
       </div>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                show: true
             }
        });   
    </script> 
</body>
</html>
  1. 绑定事件(事件修饰符)
    1. 阻止事件冒泡event.stopPropagation() vue使用.stop
    2. 阻止默认事件event.preventDefault() vue使用.prevent
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
    <style>
         div.box { height: 400px; width: 400px; border: 1px solid; padding: 50px; }
    </style>
</head>
<body>   
    <div id="app">  
        <div class="box" @click="alert('div')">
            <!-- 事件修饰符.stop阻止事件冒泡 -->
            <button @click.stop="alert('button')">button</button>
        </div> 
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app',  
        });   
    </script> 
</body>
</html>

(六) 生命周期背诵

beforeCreate ----》实例创建之前 created ----》实例创建之后 beforeMount ----》实例挂载之前 mounted ----》实例挂载之后 beforeUpdate ----》实例更新之前 updeted ----》实例更新之后 beforeDestroy ----》实例销毁之前 destroyed ----》实例销毁之后

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>

<body>
    <!-- 模板 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        // 创建一个Vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            },

            // 实例创建之前
            beforeCreate() {
                console.log('this.msg',this.msg);
                console.log('实例创建之前');
            },
            // 实例创建完毕
            created() {
                console.log('this.msg',this.msg);
                console.log('实例创建完毕');
            },
            // 实例挂载之前  
            beforeMount() {
                console.log('实例挂载之前'); 
            },
            // 实例挂载之后
            mounted() {
                console.log('实例挂载之后');
            },
            // 实例更新之前
            beforeUpdate() {

            },
            // 实例更新之后
            updeted() {

            },
            // 实例销毁之前
            beforeDestroy() {

            },
            // 实例销毁之后
            destroyed() {

            } 
        });
    </script>
</body>

</html>

(七) 条件渲染

v-if和v-show的区别**(背诵)**

  1. 使用v-if, 取值为false时, 元素会被删除
  2. 使用v-show, 取值为false时, 元素不会被删除, 只是被隐藏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
       <p v-if="flag">ppppppppppppppppp</p>
       <p v-else>qqqqqqqqqqqqqqqqq</p>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                flag: true
            }
        });   

        setTimeout(function() {
            vm.flag = false;
        },3000)
    </script> 
</body>
</html>


// v-if和v-show的区别
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
       <p v-if="flag">ppppppppppppppppp</p>
       <p v-show="flag">ppppppppppppppppp</p> 
    </div>  
    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                flag: true
            }
        });   

        setTimeout(function() {
            vm.flag = false;
        },3000)
    </script> 
</body>
</html>

(八) 渲染列表

  1. v-for指令渲染列表
  2. :key="index" 添加key可以优化渲染效率(速度)
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
    <style>
        ul,li{list-style: none;}
        li{margin-top: 10px;}
    </style>
</head>
<body>  
    <div id="app">  
       <ul>
           <li v-for="(item,index) in list" :key="index">
            {{index+1}}. 姓名:{{item.username}} 年龄:{{item.age}}
           </li> 
       </ul>
    </div>  
    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
               list: [
                   {
                       username: 'liuxueshu',
                       age: 20
                   },
                   {
                       username: 'lurui',
                       age: 21
                   },
                   {
                       username: 'lurui2',
                       age: 22
                   },
                   {
                       username: 'lurui3',
                       age: 23
                   }
               ]
            }
        });    
    </script> 
</body>
</html>

(九) couputed 计算属性

根据已知的属性得到一个新的属性

<!DOCTYPE html>
<html lang="en"> 
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head> 
<body> 
    <div id="app">
        <p><span>单价20</span>  <input type="text" v-model="num" placeholder="请输入数量"></p>
        <p>合计:100元</p>
    </div>
    <script>
        // 根据单价和数量计算总价
    </script>
</body> 
</html>

(十) watch 侦听器

监听已知状态(属性), 状态发生改变, 根据需求做响应操作

总结：

  1. 同一个功能 computed 和 watch 都能实现，能用 computed 的时候一般都用 computed，更简洁
  2. computed擅长根据多个属性得到一个新的属性, watch擅长监听某个属性, 然后去修改多个属性
<!DOCTYPE html>
<html lang="en"> 
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head> 
<body> 
    <div id="app">
        <p><span>单价20.00元</span>  <input type="text" placeholder="请输入数量"></p>
        <p>合计:100元</p>
        <p>今天总共花了100元,私房钱都花没了</p>
    </div>
    <script>
        // 输入数量, 计算总价, 总价大于大于100时显示消息 
    </script>
</body> 
</html>

(十一) refs

refs用来获取原生dom节点或者子组件实例

<!DOCTYPE html>
<html lang="en"> 
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head> 
<body> 
    <div id="app">
      <div ref="box">这个一个div标签</div>
    </div>
    <script>
        new Vue({
          el: '#app',
          data: {
            
          },
          created() {
            console.log(this.$refs['box']);
          },
          mounted() {
            console.log(this.$refs['box']);
          }
        })
    </script>
</body> 
</html>

(十二) 请求数据

在created生命周期里发起请求

TIP

  1. 创建vue3项目
  2. 配置简单路由

项目实战(1) - 创建vue3项目

  1. 安装脚手架

    npm install -g create-vite-app

  2. 创建项目

    create-vite-app projectName

  3. 安装依赖

    用vscode打开项目, 执行

    npm i

  4. 运行项目

    启动命令也可以在package.json里更改

    npm run dev

项目实战(2) - 配置简单路由

文档地址: https://router.vuejs.org/zh/introduction.html

  1. 安装vue路由
  2. 创建组件
  3. 创建路由
  4. 挂载路由
  5. 路由跳转

(1) 安装vue路由 

npm install vue-router@4

(2) 创建组件

创建 /views/home.vue 创建 /views/about.vue

(3) 创建路由

/router/index.js

(4) 挂载路由

// main.js

(5) 路由跳转

// app.vue